<template>
  <div>
    <nav-bar title="代金券">
      <div slot="right" class="nav_bar_coupon" @click="$router.push('/userinfo/coupon')">我的礼券</div>
    </nav-bar>
    <div class="content_scroll">
      <ul class="content">
        <li
          v-for="(item, index) in couponList"
          :key="index"
          class="coupon-list"
        >
          <div class="coupon-list-money">
            <div class="amount">
              ¥<span>{{ item.amount }}</span>
            </div>
            <div class="use-cdt">{{ item.use_cdt }}</div>
            <div class="status">
              <div
                v-if="item.status == 1"
                class="receive"
                @click="receiveClick(index)"
              >
                领取
              </div>
              <div v-else class="received">已领取</div>
            </div>
          </div>
          <ul class="coupon-list-term">
            <li>·{{ item.range }}</li>
            <li>·{{ item.expiry }}</li>
          </ul>
        </li>
      </ul>
    </div>
    <van-popup v-model="isShow" round>
      <div class="dlg">
        <div class="dlg-title">领取成功</div>
        <img src="../../../assets/img/detail/receive.png" alt="" />
        <div class="my-coupon" @click="lookCoupon">
          查看我的优惠券
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import NavBar from "../../../components/common/navbar/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      couponList: [],
      isShow: false,
    };
  },
  created() {
    this.getCouponList();
  },
  methods: {
    getCouponList() {
      this.axios.get("/detail_coupon_5546.json", {}).then((res) => {
        this.couponList = res.data.list;
      });
    },
    receiveClick(index) {
      this.isShow = true
      this.couponList[index].status = 10
    },
    lookCoupon() {
      this.$router.push('/userinfo/coupon')
      this.isShow = false
    }
  },
};
</script>

<style lang="less" scoped>
.nav_bar_coupon {
  width: 1.333333rem;
  height: .533333rem;
  line-height: .533333rem;
  border: .013333rem solid #666666;
  border-radius: .266667rem;
  font-size: .266667rem;
  color: #666666;
  text-align: center;
}

.content {
  box-sizing: border-box;
  padding: 0 .266667rem .266667rem;
  background: #f3f3f3;
}

.coupon-list {
  box-sizing: border-box;
  padding: 0 .266667rem;
  margin-top: .266667rem;
  width: 100%;
  height: 2.573333rem;
  background: #ffffff;
  border-radius: .266667rem;
}

.coupon-list-money {
  padding-top: .2rem;
  padding-bottom: .106667rem;
  display: flex;
  align-items: center;
  height: 1.066667rem;
  border-bottom: .013333rem solid #f4f4f4;
}

.amount {
  flex-shrink: 1;
  font-size: .32rem;
  color: #ff4343;
  margin-right: .4rem;
}

.amount span {
  font-size: .933333rem;
  margin-left: .066667rem;
}

.use-cdt {
  flex-grow: 1;
  font-size: .293333rem;
  font-weight: 400;
  color: #666666;
}

.status {
  flex-shrink: 1;
  width: 1.306667rem;
  height: .56rem;
  border-radius: .28rem;
  text-align: center;
  line-height: .56rem;
  font-size: .32rem;
  color: #ffffff;
  overflow: hidden;
}

.receive {
  background: #ff4343;
}

.received {
  background: #bbbbbb;
}

.coupon-list-term {
  font-size: .32rem;
  font-weight: 400;
  color: #999999;
  line-height: .533333rem;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.dlg {
  width: 6.666667rem;
  height: 4.56rem;
  background: #ffffff;
  // border-radius: .266667rem;
  overflow: hidden;
}

.dlg img {
  display: block;
  width: 4.866667rem;
  height: 2.293333rem;
  margin: 0 auto;
}

.dlg-title {
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  font-size: .48rem;
  font-weight: 800;
  color: #FF5543;
}

.my-coupon {
  background: #FF5543;
  height: 1.066667rem;
  text-align: center;
  line-height: 1.066667rem;
  font-size: .346667rem;
  font-weight: 400;
  color: #ffffff;
}
</style>